<template>
<div>
    <div  class="goods-list"  @click="getgoodsinfo()">
        <div class="goods-item">
            <img id="img1"  src="../images/手机2.jpeg">
            <h1>苹果手机 顶配 256G  16G运行内存 </h1>

            <div class="goods-info">
                <p class="price">
                    <span class="now">(惊爆价)¥999.00元</span>
                    <span class="old">原价:¥1999元</span>
                </p>
                <p class="sell">
                    <span>热卖中!   </span>
                    <span>剩余200件</span>
                </p>
            </div>
        </div>

        <div class="goods-item">
           <img id="img1"  src="../images/手机2.jpeg">
            <h1>三星手机 顶配 128G  16G运行内存 </h1>

            <div class="goods-info">
                <p class="price">
                    <span class="now">(惊爆价)¥3999.00元</span>
                    <span class="old">原价:¥4999元</span>
                </p>
                <p class="sell">
                    <span>热卖中!   </span>
                    <span>剩余1900件</span>
                </p>
            </div>
        </div>
          <div class="goods-item">
            <img id="img1"  src="../images/手机2.jpeg">
            <h1>华为手机 顶配 255G  8G运行内存 </h1>

            <div class="goods-info">
                <p class="price">
                    <span class="now">(惊爆价)¥2999.00元</span> 
                    <span class="old">原价:¥8999元</span>
                </p>
                <p class="sell">
                    <span>热卖中!   </span>
                    <span>剩余18900件</span>
                </p>
            </div>
        </div>

        <div class="goods-item">
          <img id="img1"  src="../images/手机2.jpeg">
            <h1>小米手机 顶配 256G  32G运行内存 </h1>

            <div class="goods-info">
                <p class="price">
                    <span class="now">(惊爆价)¥3999.00元</span>
                    <span class="old">原价:¥999元</span>
                </p>
                <p class="sell">
                    <span>热卖中!   </span>
                    <span>剩余200件</span>
                </p>
            </div>
        </div>

         <div class="goods-item">
            <img id="img1"  src="../images/手机2.jpeg">
            <h1>三星手机 顶配 256G  16G运行内存 </h1>

            <div class="goods-info">
                <p class="price">
                    <span class="now">(惊爆价)$4999.00元</span>
                    <span class="old">原价:$1999元</span>
                </p>
                <p class="sell">
                    <span>热卖中!   </span>
                    <span>剩余212300件</span>
                </p>
            </div>
        </div>

         <div class="goods-item">
           <img id="img1"  src="../images/手机2.jpeg">
            <h1>苹果手机 顶配 256G  16G运行内存 </h1>

            <div class="goods-info">
                <p class="price">
                    <span class="now">(惊爆价)¥999.00元</span>
                    <span class="old">原价:¥1999元</span>
                </p>
                <p class="sell">
                    <span>热卖中!   </span>
                    <span>剩余200件</span>
                </p>
            </div>
        </div>

         <div class="goods-item">
            <img id="img1"  src="../images/手机2.jpeg">
            <h1>苹果手机 顶配 256G  16G运行内存 </h1>

            <div class="goods-info">
                <p class="price">
                    <span class="now">(惊爆价)¥999.00元</span>
                    <span class="old">原价:¥1999元</span>
                </p>
                <p class="sell">
                    <span>热卖中!   </span>
                    <span>剩余200件</span>
                </p>
            </div>
        </div>

         <div class="goods-item">
            <img id="img1"  src="../images/手机2.jpeg">
            <h1>苹果手机 顶配 256G  16G运行内存 </h1>

            <div class="goods-info">
                <p class="price">
                    <span class="now">(惊爆价)¥999.00元</span>
                    <span class="old">原价:¥1999元</span>
                </p>
                <p class="sell">
                    <span>热卖中!   </span>
                    <span>剩余200件</span>
                </p>
            </div>
        </div>

        
    </div>
    </div>
</template>

<script>
export default {
    data(){
        return {

        }
    },
    methods:{
        getgoodsinfo(){
            this.$router.push("/goodsinfo" );
        }
    }

}
</script>

<style >





.goods-list{
    padding-bottom: 50px;
    display: flex;
    flex-wrap:wrap;
    justify-content: space-around;   
    padding: 7px; 
   cursor: pointer;

}
.goods-item{
    width: 49%;
    border: 1px solid grey;
    margin: 3px 0 ;
    box-shadow: 0 0 8px #ccc;

    justify-content: space-between ;  

    display: flex;
    flex-direction: column;


}
 #img1{
     width: 100%;
 }
.goods-info{
    background-color: #ccc;
}

.now , .sell{
    color: red;
    font-size: 20px;
}
.now{
    font-size: 30px;
}
.goods-item:hover{

    border: 3px solid aqua; 
    
}

</style>
